<template>
  <view class="inputSearchWrapper">
    <view class="styleSearchInputModeContainer">
      <view class="styleClearContainer">
        <image class="styleClearIcon" :src="srcInputSearchIcon"></image>
      </view>
      <input
        class="styleInput"
        :placeholder="placeholder"
        :focus="inputModeIsFocus"
        v-model="inputModeText"
        :clearable="false"
        :placeholder-style="placeholderStyle"
        @input="onInputChanged"
        maxlength="20"
        @focus="handleInputFocus"
        :disabled="disabled"
        cursor-spacing="300"
        v-if="isIOS"
      />
      <view class="fakeInput" @click="handleFakeInputClick" v-else>
        {{ placeholder }}
      </view>
    </view>
    <view
      class="styleMajorList"
      v-if="searchResultList.length && inputModeText && canShowMajorList"
    >
      <scroll-view
        class="styleScrollView"
        scroll-with-animation
        scroll-y="true"
        @scrolltolower="onLoadMore"
        :lower-threshold="100"
        show-scrollbar="true"
      >
        <view
          class="styleItem"
          v-for="(item, index) in searchResultList"
          :key="index"
          @click="clickMajorItem(item)"
        >
          <rich-text class="styleName" :nodes="highLightText(item)"></rich-text>
          <view class="styleLine" v-if="index != list.length - 1"></view>
        </view>
        <!-- <view class="styleBottom" v-if="isShowBottom"></view> -->
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { positionTagAndParentList } from "@/api/modules/positionDictionary.js";
import { matchPositionListNew, addBuryingPoint, getPositionTemplate } from "@/api/modules/career.js";

export default {
  props: {
    searchType: {
      type: Number,
      default: 1,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    searchType: {
      handler(newValue, oldValue) {
        if (newValue == 1) {
          //查专业
          this.requestMethod = positionTagAndParentList;
          this.placeholder = "请输入要查询的专业";
        } else if (newValue == 2) {
          //查职业
          this.requestMethod = matchPositionListNew;
          this.placeholder = "请输入要查询的职业";
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      isIOS: uni.getSystemInfoSync().platform == "ios",
      debounceTimeout: null,
      placeholder: "请输入要查询的专业",
      requestMethod: "",
      inputModeText: "",
      searchResultList: [],
      majorListParam: {
        pageNo: 1,
        pageSize: 10,
        pages: 0,
      },
      loadingType: "normal",
      inputModeIsFocus: false,
      canShowMajorList: false,
      placeholderStyle:
        "color: rgba(0,0,0,0.25);font-weight:400;font-size:28rpx;",
      srcInputSearchIcon:
        this.$imgBaseSelf + "career/positionDictionary/input_search_icon.webp",
      buryingPointId: "",
      cardType: "",
    };
  },
  mounted() {
    this.$bus.$on("closeMajorList", () => {
      console.log("closeMajorList");
      this.canShowMajorList = false;
    });
  },
  destroyed() {
    this.$bus.$off("closeMajorList");
  },
  methods: {
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync("person-id").slice(2) || "0",
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync("cardType") || this.cardType,
        consultantId: uni.getStorageSync("sellId")
          ? uni.getStorageSync("sellId")
          : "",
        originType: this.originFrom == "shareLink" ? 10 : 20,
        statType: statType ? statType : "10",
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType,
      };
      const res = await addBuryingPoint(params);
    },
    handleInputFocus() {
      setTimeout(() => {
        this.canShowMajorList = true;
      }, 200);
    },
    handleFakeInputClick() {
      console.log("handleFakeInputClick", this.searchType);

      switch (this.searchType) {
        case 1:
          //  埋点统计访问次数
          this.addBuryingPointFn(20040, "", "", "", "");
          wx.reportEvent("search_major_college_advertise_click", {}); //营销页—查专业(点击跳转到查专业页面)
          uni.navigateTo({
            url: "/pagesSub/careerNew/positionDictionary/MajorSearchSub",
          });
          break;
        case 2:
          //  埋点统计访问次数
          this.addBuryingPointFn(20041, "", "", "", "");
          wx.reportEvent("search_position_college_advertise_click", {}); //营销页—查职业(点击跳转到查职业页面)
          uni.navigateTo({
            url: "/pagesSub/careerNew/positionDictionary/searchPos",
          });
          break;
        case 3:
          break;

        default:
          break;
      }
    },
    debounce(func, wait) {
      clearTimeout(this.debounceTimeout);
      this.debounceTimeout = setTimeout(() => {
        func.apply(this);
      }, wait);
    },
    onInputChanged(e) {
      const value = e.detail.value;
      this.majorListParam.pageNo = 1;
      this.loadingType = "normal";
      this.canShowMajorList = true;
      if (value && value.length > 0) {
        this.searchResultList = [];
        this.debounce(this.doSearch, 300);
      } else {
        this.searchResultList = [];
      }
    },
    async clickMajorItem(item) {
      let url = "";
      switch (this.searchType) {
        case 1:
          url = `/pagesSub/careerNew/majorDetail/index?positionTagId=${item.positionTagId}`;
          break;
        case 2:
          let params = `positionName=${item.positionName}&positionId=${item.ylPositionId}&parentTitle=${item.parentName}&topTitle=${item.topName}`;
          //请求接口看是否走新页面
          const templateId = await this.getPositionTemplateFn(item.ylPositionId);
          if (templateId == 6) {
            url = `/pagesSub/careerNewPositionDictionary/positionDetail?${params}`;
          } else {
            url = `/pagesSub/careerNew/positionDictionary/positionDetail?${params}`;
          }
          // url = `/pagesSub/careerNew/positionDictionary/positionDetail?${params}`;
          break;

        default:
          break;
      }
      uni.navigateTo({
        url: url,
      });
    },
    async getPositionTemplateFn(positionId) {
      const res = await getPositionTemplate({positionId: positionId});
      if (res.code == 200) {
        return res.data.templateId;
      } else {
        return 0;
      }
    },
    highLightText(item) {
      const content = item.tagName || item.positionName;
      let suffix = "";
      if (item.cateType == 10) {
        suffix = " - 专科";
      } else if (item.cateType == 30) {
        suffix = " - 本科";
      }
      const regex = new RegExp(this.inputModeText, "gi");
      const highlightedText = content.replace(
        regex,
        '<span style="color:#F75A3E;">' + this.inputModeText + "</span>"
      );
      return highlightedText + suffix;
    },
    doSearch() {
      if (!(this.requestMethod instanceof Function)) return;
      const params = {
        pageNo: this.majorListParam.pageNo,
        pageSize: this.majorListParam.pageSize,
        matchName: this.inputModeText,
        //查专业的数据
        tagLevel: 3,
        tagType: 10,
        cateType: "10,30",
      };
      this.requestMethod(params)
        .then((res) => {
          if (res.code == 200) {
            this.searchResultList = this.searchResultList.concat(res.data);
            if (this.majorListParam.pageNo > res.pageparam.pages) {
              this.loadingType = "nomore";
            }
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    onLoadMore() {
      console.log("onLoadMore");
      this.loadMore();
    },
    loadMore() {
      console.log("loadMore");
      if (this.loadingType == "normal") {
        this.loadingType = "loading";
        setTimeout((res) => {
          this.majorListParam.pageNo += 1;
          this.doSearch();
          this.loadingType = "normal";
        }, 0);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.inputSearchWrapper {
  position: relative;
}
.styleSearchInputModeContainer {
  display: flex;
  position: relative;
  height: 80rpx;
  background-color: #ffffff;
  // margin-left: 32rpx;
  // margin-right: 32rpx;
  box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(114, 165, 195, 0.3);
  border-radius: 40rpx;
  filter: blur(0px);
  margin-top: 4rpx;
  margin-bottom: 4rpx;
  .fakeInput {
    height: 80rpx;
    margin-left: 91rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100vw; // width: 100%;
    margin-right: 28rpx;
    color: rgba(0, 0, 0, 0.25);
    font-weight: 400;
    font-size: 28rpx;
  }
  .styleInput {
    height: 80rpx;
    margin-left: 91rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%; // width: 100%;
    margin-right: 18rpx;
  }

  .styleClearContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 28rpx;
    transform: translateY(-50%);

    .styleClearIcon {
      width: 32rpx;
      height: 32rpx;
    }

    .styleCancelText {
      font-weight: 400;
      color: #888888;
      line-height: 36rpx;
      font-size: 28rpx;
      margin-left: 12rpx;
    }
  }
}
.styleMajorList {
  width: 612rpx;
  height: 469rpx;
  bottom: -470rpx;
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  padding: 15rpx 32rpx;
  margin: 12rpx 0 0;
  background-color: white;
  border-radius: 26rpx;
  background: linear-gradient(
    -2deg,
    rgba(255, 255, 221, 1),
    rgba(255, 255, 255, 1)
  );
  box-shadow: -10rpx 11rpx 16rpx 0rpx rgba(1, 35, 86, 0.33);
  .styleScrollView {
    // height: 300rpx;
    height: 469rpx;
    .styleItem {
      display: flex;
      // width: 391rpx;
      flex-direction: column;
      justify-content: center;
      .styleName {
        font-weight: 400;
        color: #222222;
        line-height: 40rpx;
        font-size: 30rpx;
        margin-top: 17rpx;
        margin-bottom: 21rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        margin-left: 5rpx;
      }

      .styleDesciption {
        font-weight: 400;
        color: #888888;
        line-height: 40rpx;
        margin-top: 16rpx;
        margin-left: 32rpx;
        margin-right: 32rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .styleLine {
        // margin-left: 32rpx;
        // margin-right: 32rpx;
        height: 2rpx;
        background: #dde7f9;
        // margin-top: 36rpx;
      }
    }

    .styleBottom {
      background-color: transparent;
      height: 50rpx;
    }
  }
}
</style>
